UI enhancement

2 files changed, 75 insertions, 8 deletions

diff --git a/src/app/anime/[id]/buttons.jsx b/src/app/anime/[id]/buttons.jsx
index 9c297d2..c1b4615 100644
--- a/src/app/anime/[id]/buttons.jsx
+++ b/src/app/anime/[id]/buttons.jsx
@@ -1,7 +1,7 @@
 "use client";

 

 import styles from "./info.module.css";

-import { useState } from "react";

+import { useState, useEffect } from "react";

 import { fetch_video_link } from "../videoLinkfetcher";

 import { MediaPlayer, MediaProvider } from "@vidstack/react";

 import "@vidstack/react/player/styles/default/theme.css";

@@ -15,6 +15,13 @@ import { storeLocal } from "../history/storeData";
 export default function Button({ data2: info }) {

 	const currentDate = new Date();

 	const [videoLink, setVideoLink] = useState(null);

+	const [buttonGroups, setButtonGroups] = useState(null);

+

+	useEffect(() => {

+		create_button_group(0, 50);

+	}, []);

+

+	const groups = createGroups(info.episodes, 50);

 

 	async function video(id) {

 		const link = await fetch_video_link(id);

@@ -25,6 +32,14 @@ export default function Button({ data2: info }) {
 		}

 	}

 

+	function createGroups(array, size) {

+		const groups = [];

+		for (let i = 0; i < array.length; i += size) {

+			groups.push(array.slice(i, i + size));

+		}

+		return groups;

+	}

+

 	function store_to_local(name, image, episode, id) {

 		let newData = {

 			name: name,

@@ -42,13 +57,11 @@ export default function Button({ data2: info }) {
 		storeLocal(newData);

 	}

 

-	return (

-		<main>

-			<h2 className={styles.buttonHeader}>Episodes: </h2>

+	function create_button_group(start, end) {

+		setButtonGroups(

 			<div className={styles.buttonContainer}>

-				{info &&

-					info.episodes &&

-					info.episodes.map((item, index) => (

+				{info.episodes &&

+					info.episodes.slice(start, end).map((item, index) => (

 						<button

 							className={styles.dramaButton}

 							key={index}

@@ -68,7 +81,38 @@ export default function Button({ data2: info }) {
 						</button>

 					))}

 			</div>

+		);

+	}

 

+	function handleSelectChange(event) {

+		const selectedIndex = event.target.selectedIndex;

+		const selectedGroup = groups[selectedIndex];

+		if (selectedGroup) {

+			create_button_group(

+				selectedGroup[0].number - 1,

+				selectedGroup[selectedGroup.length - 1].number

+			);

+		}

+	}

+

+	return (

+		<main>

+			<h2 className={styles.buttonHeader}>Episodes: </h2>

+			{info.episodes && (

+				<select

+					onChange={(event) => handleSelectChange(event)}

+					className={styles.SelectClass}

+				>

+					{groups &&

+						groups.map((item, index) => (

+							<option key={index}>

+								{item[0].number} -{" "}

+								{item[item.length - 1].number}

+							</option>

+						))}

+				</select>

+			)}

+			{buttonGroups}

 			{videoLink && (

 				<div

 					className={styles.videoPopUp}

diff --git a/src/app/anime/[id]/info.module.css b/src/app/anime/[id]/info.module.css
index e6d0af1..fd14d32 100644
--- a/src/app/anime/[id]/info.module.css
+++ b/src/app/anime/[id]/info.module.css
@@ -37,6 +37,25 @@
 	color: rgba(255, 255, 255, 0.637);

 }

 

+.SelectClass {

+	background-color: #272727;

+	color: white;

+	font-family: "Lexend Deca", serif;

+	border: none;

+	outline: none;

+	padding: 0.5rem;

+	border-radius: 0.5rem;

+	text-align: center;

+}

+

+.SelectClass::-webkit-scrollbar {

+	width: 0;

+}

+

+.SelectClass option:checked {

+	background-color: rgb(0, 160, 223);

+}

+

 .buttonContainer {

 	margin: 0px;

 	height: 200px;

@@ -72,7 +91,7 @@
 .dramaButton {

 	padding: 10px;

 	font-family: "Lexend Deca", serif;

-	margin: 5px 5px 5px 5px;

+	margin: 0.5rem 0.5rem 0px 0px;

 	width: 55px;

 	border-radius: 5px;

 	text-align: center;

@@ -161,4 +180,8 @@
 	.video {

 		width: 100%;

 	}

+

+	.buttonContainer {

+		text-align: center;

+	}

 }